import { ReactNode } from "react";
import BySpin from "../ui/BySpin";
import { SkeletonGroup } from "./Skeleton";
import ByEmpty from "../ui/ByEmpty";
import { View } from "@tarojs/components";

type ListViewProps = {
  loading?: boolean;
  isEmpty?: boolean;
  children?: ReactNode;

  emptyText?: string;
  className?: string;

  skeletonRows?: number;
  skeletonCount?: number;
  skeletonAvatar?: boolean;

  slotEmpty?: ReactNode
};

export default ({
  loading,
  isEmpty,
  emptyText,
  children,
  className,

  skeletonRows,
  skeletonCount,
  skeletonAvatar,

  slotEmpty
}: ListViewProps) => {
  return (
    <View className={className}>
      {isEmpty ? (
        loading ? (
          <SkeletonGroup
            count={skeletonCount}
            rows={skeletonRows}
            avatar={skeletonAvatar}
          />
        ) : (
          <>
            <ByEmpty text={emptyText} />
            {slotEmpty}
          </>
        )
      ) : null}

      {children}



      {loading && !isEmpty && <BySpin />}
    </View>
  );
};
